<script lang="ts" setup>
import { ref } from 'vue';
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { comments } = useStore();
const { nowPost } = storeToRefs(comments);
const emit = defineEmits(["enterEditing", "exitEditing"]);
const editing = ref(false);
const handleEnter = () => {
	editing.value = true;
	emit("enterEditing");
}
const handleExit = () => {
	editing.value = false;
	emit("exitEditing");
}
</script>

<template>
	<div class="detail-bar-footer">
		<span>创作于 {{ nowPost.postCreateTime }}</span>
		<span v-if="!editing" @click="handleEnter">回复</span>
		<span v-else @click="handleExit">收起</span>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.detail-bar-footer {

	span:first-child {
		color: #d6d6d6;
	}

	span:nth-child(2) {
		float: right;
		cursor: pointer;
		color: #859ec5;
	}

	span:nth-child(2):hover {
		color: $theme;
	}
}
</style>
